<template>
  <view class="goods_info_com">
    <!-- 		<view class="goods_prc">
			<view class="prc_box">
				<view class="prc">{{ goodsInfo.buyPriceDesc }}</view>
				<view class="rem_prc">
					{{$t('locales.suggestedRetailPrice')}}：￥{{ goodsInfo.commonPriceDesc }}
				</view>
			</view>
			<view
				class="collection"
				@click="setColletc(goodsInfo.isGoodsColletc)"
			>
				<image
					class="collection_icon"
					src="http://img.druglots.cn/image/xin.png"
					v-if="goodsInfo.isGoodsColletc === 1"
				></image>
				<image
					class="collection_icon"
					src="http://img.druglots.cn/image/nuxin.png"
					v-else
				></image>
				<view class="text">
					{{ goodsInfo.isGoodsColletc === 1 ? $t('locales.collected') : $t('locales.collection') }}
				</view>
			</view>
		</view> -->
    <view class="goods_name">
      <view>
        <view class="name u-line-2">
					<view class="demo-tag-owner" :style="{background:(goodsInfo.deliveryMode === 0 ? '#E0EBFF' : goodsInfo.deliveryMode === 1 ? '#FEE7E1' : '#FFEEE0')}">
							<span v-if="goodsInfo.deliveryMode === 1" style="color:#DF3C0A">{{ $t('locales.Bonded') }}</span>
							<span v-if="goodsInfo.deliveryMode === 0" style="color:#416BB5">{{ $t('locales.directmail') }}</span>
							<span v-if="goodsInfo.deliveryMode === 2" style="color:#95642C">{{ $t('locales.stocking') }}</span>
					</view>
          {{ goodsInfo.goodsName }}
          </view>
        <view class="collection" @click="setColletc(goodsInfo.collected)">
          <image
            class="collection_icon"
            src="http://img.druglots.cn/image/xin.png"
            v-if="goodsInfo.collected === 1"
          ></image>
          <image
            class="collection_icon"
            src="http://img.druglots.cn/image/collect.png"
            v-else
          ></image>
          <view class="text">
            {{
              goodsInfo.collected === 1
                ? $t('locales.collected')
                : $t('locales.collection')
            }}
          </view>
        </view>
      </view>
      <view
        class="prc_box"
        :class="{ ladderPrice: (goodsInfo.ladderPriceList || []).length }"
        :style="{
          'justify-content': (goodsInfo.ladderPriceList || []).length === 2 ? 'flex-start!important' : ''
        }"
      >
        <view class="prc" v-if="goodsInfo.price && (!(goodsInfo.ladderPriceList || []).length) && (goodsInfo.skuNum === 1)">
          <!-- <text>{{ goodsInfo.currencySymbol }}</text> -->
          <!--  v-if="goodsInfo.login" -->
          <!-- {{ goodsInfo.priceRange[0].toFixed(2) }} -->
          {{ goodsInfo.priceStringRange }}
        </view>

        <view class="prc" v-else-if="goodsInfo.price && (!(goodsInfo.ladderPriceList || []).length) && (goodsInfo.skuNum > 1)">
          <!-- {{ currency }} {{ goodsInfo.priceRange[0].toFixed(2) }}<text v-if="goodsInfo.priceRange[1]"> ~ {{ currency }} {{ goodsInfo.priceRange[1].toFixed(2) }}</text> -->
          {{ goodsInfo.priceStringRange }} 
        </view>
        
        <!-- 	<view class="rem_prc">
					{{$t('locales.suggestedRetailPrice')}}：￥{{ goodsInfo.commonPriceDesc }}
				</view> -->
        <template v-if="(goodsInfo.ladderPriceList || []).length">
          <view
            v-for="(item, index) in goodsInfo.ladderPriceList"
            :key="item.startQty"
            class="price-item"
            :style="{
              'flex-basis': (goodsInfo.ladderPriceList || []).length === 2 ? '200rpx' : 'auto'
            }"
          >
            <view class="prcbefore">{{ goodsInfo.currencySymbol }}</view>
            <view class="prc">{{ item.price }}</view>
            <view class="startQty">{{ index === 0 ? '≥' : '&gt;' }} {{ item.startQty }} {{ goodsInfo.unit }}</view>
          </view>
        </template>
      </view>
      <!--  v-if="!(goodsInfo.ladderPriceList || []).length" -->
      <view class="stocktwo">
        <view class="stock"> {{ $t('locales.startingQuantity') }}：{{ goodsInfo.startingQuantity }} </view>
        <view v-if="goodsInfo.isMixUp !== 1" class="mixin-format">
          <!-- <u-icon name="close-circle" size="24rpx" class="close-circle" /> -->
          <image src="@/static/images/fail.png" class="image" />
          {{ $t('locales.mixUpDisabled') }}
        </view>
        <view v-else class="mixin-format">
          <!-- <u-icon name="checkmark-circle" size="24rpx" class="success-circle" /> -->
          <image src="@/static/images/success.png" class="image" />
          {{ $t('locales.mixUpEnabled') }}
        </view>
        <view
          class="stock right" :style="{
            opacity: isShowStock
          }"
        >
          {{ $t('locales.currentInventory') }}：{{ goodsInfo.availableQty }}
        </view>
      </view>

      <!-- <view v-else class="stock-bar">
        {{ $t('locales.currentInventory') }}：{{ goodsInfo.availableQty }}
      </view> -->

      <view v-if="goodsInfo.distributorPriceType === -1" class="apply__btn" @click="onClickApplyBtn">
        <text class="label">{{ $t('locales.becomeAgent') }}</text>
        <text class="description">{{ $t('locales.applySlogan') }}</text>
        <!-- <u-icon name="arrow-right" size="22" color="#0049AC" /> -->
        <u-button class="button" @click="onClickApplyBtn">{{ $t('locales.applyNow') }}</u-button>
      </view>
    </view>
    

    <view class="deliverGoods" @click="deliverClick">
      <u-section :title="$t('locales.seeShipped')" :sub-title="$t('locales.more')"></u-section>
    </view>
    <!-- <view
			class="def-adders"
			@click="navSwitch('/pages/user/address/index')"
		>
			<text style="color: #999999;margin-right: 10rpx">送至</text>
			<u-icon name="map" color="#2979ff" size="28"></u-icon>
			<view class="adders-info">
				{{ goodsInfo.address || '请点击填写收货地址' }}
			</view>
			<u-icon name="arrow-right" color="#999" size="28"></u-icon>
		</view> -->
    <DliverPopup
      v-model="delivershow"
      :data="value"
      :deliverdata="delivercontent"
    />

    <view class="goods_info">
      <view class="title">{{ $t('locales.goodsInfo') }}</view>
      <view class="provideicp" v-if="goodsInfo.qualificationRequired === 1">{{ $t('locales.goodsProvide') }} {{goodsInfo.qualificationName}}</view>
      <view
        v-if="
          goodsInfo.brand ||
          goodsInfo.manufacturer ||
          goodsInfo.barCode ||
          goodsInfo.articleNumber ||
          goodsInfo.weight
        "
        class="goods-info__wrap"
      >
        <view class="goods_info_item" v-if="goodsInfo.brand">
          <view class="name u-line-1">{{ $t('locales.brand') }}</view>
          <view class="info">{{ goodsInfo.brand }}</view>
        </view>
        <view class="goods_info_item" v-if="goodsInfo.manufacturer">
          <view class="name u-line-1">{{ $t('locales.manufactor') }}</view>
          <view class="info">{{ goodsInfo.manufacturer }}</view>
        </view>
        <view class="goods_info_item" v-if="goodsInfo.barCode">
          <view class="name u-line-1">{{ $t('locales.barCode') }}</view>
          <view class="info">{{ goodsInfo.barCode }}</view>
        </view>
        <view class="goods_info_item" v-if="goodsInfo.articleNumber">
          <view class="name u-line-1">{{ $t('locales.articleNumber') }}</view>
          <view class="info">{{ goodsInfo.articleNumber }}</view>
        </view>
        <view class="goods_info_item" v-if="goodsInfo.weight">
          <view class="name u-line-1">{{ $t('locales.weight') }}</view>
          <view class="info">{{ goodsInfo.weight }}KG</view>
        </view>
      </view>
      <view v-if="!(goodsInfo.commodityAttributesValues && (goodsInfo.commodityAttributesValues || []).length)">
        <view v-for="item in goodsInfo.commodityAttributesValues" :key="item.id" class="goods_info_item" >
          <view class="name u-line-1">{{ item.attributeName }}：</view>
          <view class="info">{{ item.attributeValue }}</view>
        </view>
      </view>

      <!-- <view
        style="padding: 5px"
        v-if="
          !goodsInfo.brand &&
          !goodsInfo.manufacturer &&
          !goodsInfo.barCode &&
          !goodsInfo.articleNumber &&
          !goodsInfo.weight && (goodsInfo.commodityAttributesValues && (goodsInfo.commodityAttributesValues || []).length === 0) &&
          !goodsInfo.goodsBasePriceD
        "
      >
        {{ $t('locales.noneGoodsInfo') }}
      </view> -->
      <view
        v-if="(goodsInfo.commodityAttributesValues && (goodsInfo.commodityAttributesValues || []).length) || goodsInfo.skuNum > 0"
        class="lookmore"
        @click="lookmoreClick"
      >
        {{ $t('locales.seeMore') }}

        <u-icon name="arrow-right" class="icon" size="22" color="#666" />
      </view>
      <MoreDeatail
        v-model="moreshow"
        :data="value"
        :deliverdata="morecontent"
      />
      <!-- 			<view
				class="goods_info_item"
				:key="item.id"
				v-for="item in goodsInfo.attributeAddDTO
					.requiredGoodsBaseAttributeList"
			>
				<view class="name u-line-1">{{ item.attribute }}：</view>
				<view class="info">{{ item.attributeValue }}</view>
			</view> -->
      <!-- 			<view
				class="goods_info_item"
				:key="item.id"
				v-for="item in goodsInfo.attributeAddDTO
					.requiredGoodsSupplementAttributeList"
			>
				<view class="name u-line-1">{{ item.attribute }}：</view>
				<view class="info">{{ item.attributeValue }}</view>
			</view> -->
    </view>
    <view style="margin-top: 20px">
      <u-parse :html="nodetext"></u-parse>
    </view>
    <view class="goods_img">
      <u-lazy-load
        v-for="item in goodsInfo.goodsDetailPicList"
        :key="item.id"
        :image="item.pictureUrl"
      ></u-lazy-load>
    </view>
  </view>
</template>
<script>
import {
  collect,
  cancelCollect,
  sendDeliveryInfo,
  sendMoreGoodsInfo
} from '@/api/http/order'
import DliverPopup from '@/components/deliverPopup'
import MoreDeatail from '@/components/moreDetail'
import { Base64 } from 'js-base64'
export default {
  components: {
    DliverPopup,
    MoreDeatail
  },
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },

  computed: {
    currency() {
      return this.$store.state.user.currency
    },

    isLogin() {
      return this.$store.getters.isLogin
    },

    isShowStock() {
      if (this.goodsInfo.skuNum === 1) {
        return 1
      }

      if ((this.goodsInfo.ladderPriceList || []).length) {
        return 0
      }

      if (this.goodsInfo.skuNum > 1) {
        return 0
      }

      return  1
    }
  },

  watch: {
    value(val) {
      this.nodetext = Base64.decode(val.goodsDesc)
      this.goodsInfo = val
    }
  },
  data() {
    return {
      goodsInfo: {
        attributeAddDTO: {
          requiredGoodsBaseAttributeList: [],
          requiredGoodsSupplementAttributeList: []
        },
        goodsDetailPicList: []
      },
      delivershow: false,
      delivercontent: {},
      moreshow: false,
      morecontent: [],
      nodetext: '',
    }
  },
  methods: {
    lookmoreClick() {
      this.moreshow = false
      // 获取更多商品信息
      sendMoreGoodsInfo({ id: this.goodsInfo.id, industryTypeCode: this.goodsInfo.industryTypeCode }).then((res) => {
        if (res.code === 200) {
          this.morecontent = res.data
          this.moreshow = true
        }
      })
    },
    deliverClick() {
      this.delivershow = false
      // 查看商品发货信息
      sendDeliveryInfo({ id: this.goodsInfo.deliveryId }).then((res) => {
        if (res.code === 200) {
          this.delivercontent = res.data
          this.delivershow = true
        }
      })
    },
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },
    setColletc(type) {
      collect({
        goodsId: this.goodsInfo.id,
        domainPrefix: this.goodsInfo.domainPrefix //  商品详情有这个字段所以后台不能查到这个商品属于那个店铺？
      }).then((res) => {
        if (res.code === 200) {
          this.goodsInfo.collected = this.goodsInfo.collected ? 0 : 1
        }
        uni.showToast({
          icon: 'none',
          title: res.message
        })
      })

      // if (type !== 1) {
      //   collect({
      //     goodsId: this.goodsInfo.id,
      //     domainPrefix: this.goodsInfo.domainPrefix //  商品详情有这个字段所以后台不能查到这个商品属于那个店铺？
      //   }).then((res) => {
      //     if (res.code === 200) {
      //       this.goodsInfo.collected = 1
      //     }
      //     uni.showToast({
      //       icon: 'none',
      //       title: res.message
      //     })
      //   })
      // } else {
      //   cancelCollect({
      //     goodsCollectIdList: [this.goodsInfo.id]
      //   }).then((res) => {
      //     if (res.code === 200) {
      //       this.goodsInfo.collected = 0
      //     }
      //     uni.showToast({
      //       icon: 'none',
      //       title: res.message
      //     })
      //   })
      // }
    },

    onClickApplyBtn() {
      if (!this.$store.getters.isLogin) {
        uni.navigateTo({
          url: '/pages/user/login/index'
        })
        return
      }

      uni.navigateTo({
        url: '/pages/productDetails/agent?storeId=' + this.goodsInfo.storeId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_info_com {
  .goods_prc {
    background-image: url('~@/static/images/prc_bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 115rpx;
    color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .goods_name {
    background-color: #fff;
    width: 100%;
    padding: 20rpx 20rpx 10rpx;
    box-sizing: border-box;
    .name {
      font-size: 30rpx;
      font-weight: bold;
      width: 85%;
      line-height: 50rpx;
      padding-right: 30rpx;
      float: left;
    }
    .stocktwo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1rpx solid #e5e5e5;
      padding: 18rpx 12rpx 10rpx;
      margin-top: 28rpx;
      color: #666;
      .stock {
        margin-top: 0;
      }

      .mixin-format {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        line-height: 24rpx;
        vertical-align: middle;
        color: #666;

        .close-circle {
          display: inline-block;
          margin-right: 12rpx;
          color: #FD5F12;
        }

        .success-circle {
          display: inline-block;
          margin-right: 12rpx;
          color: #FB5E12;
        }

        .image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          // vertical-align: middle;
        }
      }

      .right {
        color: #666;
      }
    }
    .stock {
      display: inline-block;
      font-size: 22rpx;
      margin-top: 10rpx;
    }
    .collection {
      float: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 10rpx;
      width: 80rpx;
      // width: 100rpx;
      // height: 76rpx;
      .collection_icon {
        width: 30rpx;
        height: 30rpx;
        margin-bottom: 10rpx;
      }
      .text {

        font-size: 20rpx;
        line-height: 50rpx;
        font-weight: 400;
        color: #222;
      }
    }
    .prc_box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      // font-weight: 700;
      padding-top: 30rpx;
      

      .prcbefore {
        display: inline;
        color: #ff2900;
        // font-weight: 700;
        font-size: 20rpx;
      }
      .prc {
        // padding: 0 12rpx;
        font-size: 36rpx;
        color: #ff2900;
        // font-weight: 700;
      }
      .prc::before {
        // content: '￥';
        font-size: 26rpx;
        font-weight: 400;
      }
      .rem_prc {
        font-size: 22rpx;
      }
    }
  }
  .def-adders {
    margin: 20rpx 0;
    height: 96rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;

    .at-icon {
      margin-left: 20rpx;
    }

    .adders-info {
      width: 560rpx;
      margin-left: 10rpx;
      font-size: 26rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .goods_info {
    width: 100%;
    background-color: #fff;
    padding-bottom: 10rpx;
    // margin-top: 20rpx;
    .title {
      padding-left: 32rpx;
      line-height: 85rpx;
      font-size: 28rpx;
      font-weight: 700;
    }
    .goods-info__wrap {
      padding-left: 33rpx;
      border-top: 1rpx solid #eee;
    }
    .goods_info_item {
      // padding: 15rpx;
      line-height: 85rpx;
      display: flex;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .name {
        width: 200rpx;
        color: #888888;
      }
      .info {
        color: #222222;
        flex: 1;
      }
    }
  }
  .goods_img {
    margin-top: 20rpx;
    background-color: #fff;
  }

  .deliverGoods {
    width: 100%;
    height: 88rpx;
    background: #ffffff;
    margin-top: 16rpx;
    margin-bottom: 16rpx;
    padding: 0 10rpx;
    .u-section {
      height: 44px;
    }
  }
}
.lookmore {
  height: 85rpx;
  background: #ffffff;
  text-align: center;
  line-height: 85rpx;
  border-top: 1px solid #eeeeee;
  color: #666666;

  .icon {
    display: inline-block;
    margin-left: 11rpx;
  }
}

.provideicp {
  height: 70rpx;
  font-size: 26rpx;
  font-family: 'PingFang SC';
  font-weight: 500;
  line-height: 70rpx;
  margin: 0 14rpx;
  color: #fd6712;
  background: #fffbdf;
  text-align: center;
  margin-bottom: 20rpx;
}

.ladderPrice {
  

  // .price-item {
    
  // }

  .prc {
    padding: 0!important;
    margin-top: 5rpx;
  }

// 	display: flex;
// 	justify-content: space-between;
	.startQty {
    margin-top: 15rpx;
		font-size: 24rpx;
		color: #666666;
	}
}

.apply__btn {
  display: flex;
  align-items: center;
  padding: 0 16rpx 0 19rpx; 
  margin: 8rpx 0 8rpx;
  line-height: 86rpx;
  text-align: center;
  border-radius: 12rpx;
  color: #fff;
  background: #0090FF;

  .label {
    flex-shrink: 0;
    padding: 0 14rpx;
    line-height: 34rpx;
    border-radius: 8rpx 0 8rpx 0;
    background: #fff;
    color: #0090FF;
  }

  .description {
    margin: 0 13rpx 0 16rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .button {
    flex-shrink: 0;
    padding: 0 16rpx;
    line-height: 36rpx;
    height: 36rpx;
    border-radius: 18rpx;
    font-size: 22rpx;
    text-align: center;
    background: #F9DBAA;
    color: #A75C13;
  }
}

.stock-bar {
  padding: 24rpx 0 16rpx;
  border-top: 1rpx solid #EEEEEE;
  margin-top: 35rpx;
  font-size: 26rpx;
  text-align: center;
  color: #666666;
}

	.demo-tag-owner {
		width: auto;
		padding: 6rpx 18rpx;	
		border-radius: 20rpx;
		font-size: 26rpx;
		line-height: 1;
    display: inline-block;
    margin-right: 5px;
    span {
      width: auto;
    }
	}

</style>
